<template>
  <div class="property-panel" :class="{ collapsed: isCollapsed }">
    <div class="panel-header">
      <h3>属性配置</h3>
      <el-button
        @click="toggleCollapse"
        link
        size="small"
        class="collapse-btn"
      >
        <el-icon>
          <ArrowLeft v-if="isCollapsed" />
          <ArrowRight v-else />
        </el-icon>
      </el-button>
    </div>
    <div class="panel-content" v-show="!isCollapsed">
      <div v-if="!selectedComponent" class="no-selection">
        请选择一个组件进行配置
      </div>
      <div v-else class="property-form">
        <el-form :key="selectedComponent.id" label-position="top">
          <!-- 基础属性 -->
          <div class="property-group">
            <h4>基础属性</h4>
            <el-form-item label="标题">
              <el-input
                v-model="selectedComponent.props.label"
                @input="updateProps"
              />
            </el-form-item>
            <el-form-item label="字段名" v-if="!isLayout(selectedComponent.type)">
              <el-input
                v-model="selectedComponent.props.field"
                @input="updateProps"
                placeholder="用于数据绑定的字段名"
              />
            </el-form-item>
            <el-form-item label="占位符" v-if="!isLayout(selectedComponent.type) && hasPlaceholder(selectedComponent.type)">
              <el-input
                v-model="selectedComponent.props.placeholder"
                @input="updateProps"
              />
            </el-form-item>
            <!-- <el-form-item label="是否必填" v-if="!isLayout(selectedComponent.type)">
              <el-switch
                v-model="selectedComponent.props.required"
                @change="updateProps"
              />
            </el-form-item> -->
            <el-form-item label="是否禁用" v-if="!isDisabledLayout(selectedComponent.type)">
              <el-switch
                v-model="selectedComponent.props.disabled"
                @change="updateProps"
              />
            </el-form-item>
            <el-form-item label="是否只读" v-if="!isReadonlyLayout(selectedComponent.type)">
              <el-switch
                v-model="selectedComponent.props.readonly"
                @change="updateProps"
              />
            </el-form-item>
            <el-form-item label="内容" v-if="selectedComponent.type === 'text' && !isLayout(selectedComponent.type)">
              <el-input
                v-model="selectedComponent.props.content"
                type="textarea"
                :rows="3"
                @input="updateProps"
              />
            </el-form-item>
          </div>

          <!-- 栅格属性 -->
          <div class="property-group" v-if="selectedComponent.type === 'grid'">
            <h4>栅格属性</h4>
            <!-- 添加布局方向选择 -->
            <el-form-item label="布局方向">
              <el-radio-group
                v-model="selectedComponent.props.direction"
                @change="updateProps"
              >
                <el-radio label="horizontal">横向</el-radio>
                <el-radio label="vertical">纵向</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="栅格列数">
              <el-input-number
                v-model="selectedComponent.props.gridColumns"
                :min="1"
                :max="12"
                @change="handleGridColumnsChange"
              />
            </el-form-item>
            <el-form-item label="栅格间距">
              <el-input-number
                v-model="selectedComponent.props.gridGap"
                :min="8"
                :max="32"
                @change="updateProps"
              />
            </el-form-item>
            <el-form-item label="显示栅格边框">
              <el-switch
                v-model="selectedComponent.props.showGridBorder"
                @change="updateProps"
              />
            </el-form-item>
            <el-form-item label="栅格边框颜色" v-if="selectedComponent.props.showGridBorder">
              <el-color-picker
                v-model="selectedComponent.props.gridBorderColor"
                @change="updateProps"
              />
            </el-form-item>
            <el-form-item label="栅格边框样式" v-if="selectedComponent.props.showGridBorder">
              <el-select
                v-model="selectedComponent.props.gridBorderStyle"
                @change="updateProps"
              >
                <el-option label="实线" value="solid" />
                <el-option label="虚线" value="dashed" />
                <el-option label="点线" value="dotted" />
              </el-select>
            </el-form-item>
          </div>

          <!-- 样式属性 -->
          <div class="property-group">
            <h4>样式属性</h4>
            <el-form-item label="宽度设置">
              <el-select
                v-model="selectedComponent.props.widthType"
                @change="updateProps"
                style="width: 100%; margin-bottom: 8px;"
              >
                <el-option label="铺满" value="full" />
                <el-option label="自定义" value="custom" />
              </el-select>
              <el-input-number
                v-if="selectedComponent.props.widthType === 'custom'"
                v-model="selectedComponent.props.customWidth"
                :min="100"
                :max="800"
                placeholder="自定义宽度"
                @change="updateProps"
                style="width: 100%;"
              />
            </el-form-item>
            <el-form-item label="高度设置" v-if="hasHeight(selectedComponent.type)">
              <el-input-number
                v-model="selectedComponent.size.height"
                :min="30"
                :max="500"
                @change="updateSize"
                @input="updateSize"
              />
            </el-form-item>
            <el-form-item label="标签位置">
              <el-select
                v-model="selectedComponent.props.labelPosition"
                @change="updateProps"
              >
                <el-option label="顶部" value="top" />
                <el-option label="左侧" value="left" />
                <el-option label="右侧" value="right" />
              </el-select>
            </el-form-item>
            <el-form-item label="标签宽度" v-if="selectedComponent.props.labelPosition !== 'top' && hasHeight(selectedComponent.type)">
              <el-input-number
                v-model="selectedComponent.props.labelWidth"
                :min="30"
                :max="500"
                @change="updateProps"
                @input="updateProps"
              />
            </el-form-item>
            <el-form-item label="字体大小">
              <el-input-number
                v-model="selectedComponent.props.fontSize"
                :min="12"
                :max="32"
                @change="updateProps"
              />
            </el-form-item>
            <el-form-item label="字体颜色">
              <el-color-picker
                v-model="selectedComponent.props.color"
                @change="updateProps"
              />
            </el-form-item>
            <el-form-item label="背景颜色">
              <el-color-picker
                v-model="selectedComponent.props.backgroundColor"
                @change="updateProps"
              />
            </el-form-item>
            <el-form-item label="边框样式">
              <el-select
                v-model="selectedComponent.props.borderStyle"
                @change="updateProps"
              >
                <el-option label="无边框" value="none" />
                <el-option label="实线" value="solid" />
                <el-option label="虚线" value="dashed" />
                <el-option label="点线" value="dotted" />
              </el-select>
            </el-form-item>
            <el-form-item label="边框颜色" v-if="selectedComponent.props.borderStyle !== 'none'">
              <el-color-picker
                v-model="selectedComponent.props.borderColor"
                @change="updateProps"
              />
            </el-form-item>
            <el-form-item label="边框宽度" v-if="selectedComponent.props.borderStyle !== 'none'">
              <el-input-number
                v-model="selectedComponent.props.borderWidth"
                :min="1"
                :max="10"
                @change="updateProps"
              />
            </el-form-item>
            <el-form-item label="圆角">
              <el-input-number
                v-model="selectedComponent.props.borderRadius"
                :min="0"
                :max="50"
                @change="updateProps"
              />
            </el-form-item>
            <el-form-item label="内边距">
              <el-input-number
                v-model="selectedComponent.props.padding"
                :min="0"
                :max="50"
                @change="updateProps"
              />
            </el-form-item>
            <el-form-item label="外边距">
              <el-input-number
                v-model="selectedComponent.props.margin"
                :min="0"
                :max="50"
                @change="updateProps"
              />
            </el-form-item>
          </div>

          <!-- 验证规则（仅非布局组件显示） -->
          <div class="property-group" v-if="!isLayout(selectedComponent.type)">
            <h4>验证规则</h4>
            <el-form-item label="验证规则">
              <el-select
                v-model="selectedComponent.props.validationRule.required"
                @change="updateProps"
                style="width: 100%;"
              >
                <el-option label="不必填" :value="false" />
                <el-option label="必填" :value="true" />
              </el-select>
            </el-form-item>
            <el-form-item label="正则表达式" v-if="hasLengthValidation(selectedComponent.type)">
              <el-input
                v-model="selectedComponent.props.pattern"
                @input="updateProps"
                placeholder="请输入正则表达式"
              />
            </el-form-item>
            <el-form-item label="正则表达式提示语" v-if="selectedComponent.props.pattern">
              <el-input
                v-model="selectedComponent.props.patternMessage"
                @input="updateProps"
                placeholder="请输入正则表达式提示语"
              />
            </el-form-item>
            <el-form-item label="最小长度" v-if="hasLengthValidation(selectedComponent.type)">
              <el-input-number
                v-model="selectedComponent.props.minLength"
                :min="0"
                @change="updateProps"
              />
            </el-form-item>
            <el-form-item label="最大长度" v-if="hasLengthValidation(selectedComponent.type)">
              <el-input-number
                v-model="selectedComponent.props.maxLength"
                :min="0"
                @change="updateProps"
              />
            </el-form-item>
          </div>

          <!-- 数字输入特殊配置 -->
          <div v-if="selectedComponent.type === 'number'" class="property-group">
            <h4>数值配置</h4>
            <el-form-item label="最小值">
              <el-input-number
                v-model="selectedComponent.props.min"
                @change="updateProps"
                @input="updateProps"
              />
            </el-form-item>
            <el-form-item label="最大值">
              <el-input-number
                v-model="selectedComponent.props.max"
                @change="updateProps"
                @input="updateProps"
              />
            </el-form-item>
            <el-form-item label="步长">
              <el-input-number
                v-model="selectedComponent.props.step"
                :min="0.1"
                :step="0.1"
                @change="updateProps"
              />
            </el-form-item>
            <el-form-item label="精度">
              <el-input-number
                v-model="selectedComponent.props.precision"
                :min="0"
                :max="10"
                @change="updateProps"
              />
            </el-form-item>
          </div>

          <!-- 静态文本特殊配置 -->
          <div v-if="selectedComponent.type === 'text'" class="property-group">
            <h4>静态文本配置</h4>
            <el-form-item label="字体大小">
              <el-input-number
                v-model="selectedComponent.props.textFontSize"
                :min="12"
                :max="72"
                @change="updateProps"
                @input="updateProps"
              />
            </el-form-item>
            <el-form-item label="字体颜色">
              <el-color-picker
                v-model="selectedComponent.props.textColor"
                @change="updateProps"
                show-alpha
              />
            </el-form-item>
            <el-form-item label="字体粗细">
              <el-select
                v-model="selectedComponent.props.textFontWeight"
                @change="updateProps"
              >
                <el-option label="正常" value="normal" />
                <el-option label="粗体" value="bold" />
                <el-option label="细体" value="lighter" />
              </el-select>
            </el-form-item>
          </div>

          <!-- 文本域特殊配置 -->
          <div v-if="selectedComponent.type === 'textarea'" class="property-group">
            <h4>文本域配置</h4>
            <el-form-item label="行数">
              <el-input-number
                v-model="selectedComponent.props.rows"
                :min="1"
                :max="10"
                @change="updateProps"
                @input="updateProps"
              />
            </el-form-item>
            <el-form-item label="是否显示字数统计">
              <el-switch
                v-model="selectedComponent.props.showWordCount"
                @change="updateProps"
              />
            </el-form-item>
            <el-form-item label="最大字数" v-if="selectedComponent.props.showWordCount">
              <el-input-number
                v-model="selectedComponent.props.maxLength"
                :min="1"
                @change="updateProps"
              />
            </el-form-item>
          </div>

          <!-- 选项配置（针对单选、多选等） -->
          <div v-if="hasOptions(selectedComponent.type)" class="property-group">
            <h4>选项配置</h4>
            <el-form-item label="布局方向" v-if="hasLayoutOption(selectedComponent.type)">
              <el-radio-group
                v-model="selectedComponent.props.layout"
                @change="updateProps"
              >
                <el-radio label="vertical">纵向</el-radio>
                <el-radio label="horizontal">横向</el-radio>
              </el-radio-group>
            </el-form-item>
            

            <el-form-item label="数据源类型">
              <el-radio-group
                v-model="selectedComponent.props.dataSourceType"
                @change="updateProps"
              >
                <el-radio label="static">静态数据</el-radio>
                <el-radio label="api">API接口</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="API接口" v-if="selectedComponent.props.dataSourceType === 'api'">
              <el-input
                v-model="selectedComponent.props.apiUrl"
                @input="updateProps"
                placeholder="请输入API接口地址"
              />
            </el-form-item>
            <div v-if="selectedComponent.props.dataSourceType === 'static'" class="options-list">
              <div
                v-for="(option, index) in selectedComponent.props.options"
                :key="index"
                class="option-item"
              >
                <el-input
                  v-model="option.label"
                  placeholder="选项标签"
                  @input="updateProps"
                />
                <el-input
                  v-model="option.value"
                  placeholder="选项值"
                  @input="updateProps"
                />
                <el-button
                  @click="removeOption(index)"
                  type="danger"
                  size="small"
                  circle
                >
                  <el-icon>
                    <Delete />
                  </el-icon>
                </el-button>
              </div>
              <el-button @click="addOption" type="primary" size="small">
                添加选项
              </el-button>
            </div>
          </div>

          <!-- 事件配置（仅非布局组件显示） -->
          <!-- <div class="property-group" v-if="!isLayout(selectedComponent.type)">
            <h4>事件配置</h4>
            <el-form-item label="点击事件">
              <el-input
                v-model="selectedComponent.props.onClick"
                @input="updateProps"
                placeholder="请输入点击事件处理函数"
              />
            </el-form-item>
            <el-form-item label="值变化事件">
              <el-input
                v-model="selectedComponent.props.onChange"
                @input="updateProps"
                placeholder="请输入值变化事件处理函数"
              />
            </el-form-item>
            <el-form-item label="焦点事件">
              <el-input
                v-model="selectedComponent.props.onFocus"
                @input="updateProps"
                placeholder="请输入焦点事件处理函数"
              />
            </el-form-item>
            <el-form-item label="失焦事件">
              <el-input
                v-model="selectedComponent.props.onBlur"
                @input="updateProps"
                placeholder="请输入失焦事件处理函数"
              />
            </el-form-item>
          </div> -->

          <!-- 删除组件 -->
          <div class="property-group">
            <el-button
              @click="$emit('delete-component', selectedComponent.id)"
              type="danger"
              style="width: 100%"
            >
              删除组件
            </el-button>
          </div>
        </el-form>
      </div>
      
      <!-- 快速设置 -->
      <!-- <QuickSettings 
        v-if="!selectedComponent || !isLayout(selectedComponent.type)"
        :selected-component="selectedComponent"
        @update-component="handleUpdateComponent"
        @copy-component="handleCopyComponent"
      /> -->
      
      <!-- 属性预览 -->
      <!-- <PropertyPreview :selected-component="selectedComponent" /> -->
    </div>
    

  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ArrowLeft, ArrowRight, Delete } from '@element-plus/icons-vue'
import PropertyPreview from './PropertyPreview.vue'
import QuickSettings from './QuickSettings.vue'
import type { CanvasComponent } from '../types'
import { text } from 'stream/consumers'

interface Props {
  selectedComponent: CanvasComponent | null
  allComponents?: CanvasComponent[]
}

const props = withDefaults(defineProps<Props>(), {
  allComponents: () => []
})

// 收起展开状态
const isCollapsed = ref(false)



// 切换收起展开状态
const toggleCollapse = () => {
  isCollapsed.value = !isCollapsed.value
}

const emit = defineEmits<{
  'update-props': []
  'update-size': []
  'delete-component': [id: string]
  'update-component': [component: CanvasComponent]
  'copy-component': [component: CanvasComponent]
}>()

// 直接修改属性时立即更新并发出事件
const updateProps = () => {
  emit('update-props')
}

const updateSize = () => {
  emit('update-size')
}

// 工具函数
const hasPlaceholder = (type: string): boolean => {
  return ['input', 'textarea', 'select', 'date', 'number'].includes(type)
}

const hasHeight = (type: string): boolean => {
  return ['input', 'textarea', 'select', 'date', 'number', 'radio', 'checkbox', 'divider', 'text', 'grid'].includes(type)
}

const hasOptions = (type: string): boolean => {
  return ['radio', 'checkbox', 'select'].includes(type)
}

const hasLayoutOption = (type: string): boolean => {
  return ['radio', 'checkbox'].includes(type)
}

const hasLengthValidation = (type: string): boolean => {
  return ['input', 'textarea'].includes(type)
}

// 是否为布局组件
const isLayout = (type: string): boolean => {
  return ['grid', 'divider','text'].includes(type)
}

// 是否禁用布局组件
const isDisabledLayout = (type: string): boolean => {
  return ['grid', 'divider' , 'text'].includes(type)
}

// 是否只读布局组件
const isReadonlyLayout = (type: string): boolean => {
  return ['grid', 'divider' , 'text'].includes(type)
}


// 添加选项
const addOption = () => {
  if (props.selectedComponent && props.selectedComponent.props.options) {
    props.selectedComponent.props.options.push({
      label: `选项${props.selectedComponent.props.options.length + 1}`,
      value: `option${props.selectedComponent.props.options.length + 1}`
    })
    updateProps()
  }
}

// 删除选项
const removeOption = (index: number) => {
  if (props.selectedComponent && props.selectedComponent.props.options) {
    props.selectedComponent.props.options.splice(index, 1)
    updateProps()
  }
}

// 处理组件更新
const handleUpdateComponent = (component: CanvasComponent) => {
  emit('update-component', component)
}

// 处理组件复制
const handleCopyComponent = (component: CanvasComponent) => {
  emit('copy-component', component)
}

// 处理栅格列数变化
const handleGridColumnsChange = () => {
  if (props.selectedComponent && props.selectedComponent.type === 'grid') {
    const currentColumns = props.selectedComponent.props.gridColumns
    const currentItems = props.selectedComponent.props.gridItems || []
    
    // 如果列数增加了，添加新的列
    if (currentColumns > currentItems.length) {
      for (let i = currentItems.length; i < currentColumns; i++) {
        currentItems.push({
          label: `列 ${i + 1}`,
          id: `col${i + 1}`
        })
      }
    }
    // 如果列数减少了，删除多余的列
    else if (currentColumns < currentItems.length) {
      currentItems.splice(currentColumns)
    }
    
    updateProps()
  }
}
</script>

<style scoped lang="scss">
.property-panel {
  width: 320px;
  background: white;
  border-left: 1px solid #e4e7ed;
  display: flex;
  flex-direction: column;
  transition: width 0.3s ease;
  
  &.collapsed {
    width: 35px;
    .panel-header {
      padding: 6px;
      h3 {
        display: none;
      }
      .collapse-btn {
        margin-left: 0;
      }
    }
  }
  
  .panel-header {
    padding: 16px;
    border-bottom: 1px solid #e4e7ed;
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    h3 {
      margin: 0;
      color: #303133;
      transition: opacity 0.3s ease;
    }
    
    .collapse-btn {
      margin-left: 8px;
      padding: 4px;
      
      &:hover {
        background-color: #f5f7fa;
      }
    }
  }
  
  .panel-content {
    flex: 1;
    padding: 16px;
    overflow-y: auto;
    
    .no-selection {
      text-align: center;
      color: #909399;
      margin-top: 60px;
    }
    
    .property-form {
      .property-group {
        margin-bottom: 24px;
        
        h4 {
          margin: 0 0 16px 0;
          color: #606266;
          font-size: 14px;
          padding-bottom: 8px;
          border-bottom: 1px solid #e4e7ed;
        }
      }
      
      .options-list {
        .option-item {
          display: flex;
          gap: 8px;
          margin-bottom: 8px;
          align-items: center;
          .el-input {
            flex: 1;
          }
        }
      }
    }
  }
}

:deep(.el-form-item) {
  margin-bottom: 16px;
}

:deep(.el-form-item__label) {
  font-weight: 500;
  color: #606266;
}
</style>